import React, { useState, useEffect } from 'react';
import { Sidebar, Toast, NavBar, Card, Badge } from 'react-vant';
import { ShoppingCartO } from '@react-vant/icons';
import '../css/cart.css';
import { history } from 'umi';
import axios from 'axios';
export default function Cart() {
  const [active, setActive] = useState(0);
  const fan = () => {
    history.push('/index/dui');
  };
  const fans = () => {
    history.push('/cartdata');
  };
  const [list, setlist] = useState([]);
  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/yrt/fenlei');
    setlist(data.data);
  };

  useEffect(() => {
    getlist();
  }, []);

  const additem = async (obj) => {
    await axios.post('http://localhost:3000/yrt/additem', { params: obj });
  };

  const [num, setnum] = useState(0);
  return (
    <div style={{ height: '100%' }}>
      <NavBar
        leftText="分类"
        rightText=<Badge content={num}>
          <ShoppingCartO fontSize={'25px'} />
        </Badge>
        onClickLeft={fan}
        onClickRight={fans}
        style={{
          background: 'rgb(43, 205, 221)',
        }}
      />
      <Sidebar
        value={active}
        onChange={(v) => {
          setActive(v);
          Toast.info(`内容区 ${v + 1}`);
        }}
      >
        <Sidebar.Item
          contentStyle={{ backgroundColor: '#e3e3e3', padding: '18px 10px' }}
          title="家居饰品"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                家居
              </p>
            </Card.Header>
            <Card.Body>
              {list.map((item) => (
                <div
                  key={item._id}
                  style={{ display: 'inline-block', marginLeft: '10px' }}
                >
                  {
                    // console.log(item.flags,"LLLLLLLLLLLLLL")
                    item.flags == '0' ? (
                      <div>
                        <img src={item.img} alt="" style={{ width: '70px' }} />
                        <br />
                        <p
                          style={{
                            display: 'inline-block',
                            marginRight: '5px',
                          }}
                        >
                          {item.jin}币
                        </p>
                        <span
                          style={{
                            display: 'inline-block',
                            width: '20px',
                            height: '20px',
                            background: 'rgb(246, 94, 111)',
                            textAlign: 'center',
                            borderRadius: '50%',
                            color: '#fff',
                          }}
                          onClick={() => additem(item)}
                        >
                          +
                        </span>
                      </div>
                    ) : (
                      ''
                    )
                  }
                </div>
              ))}
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                饰品
              </p>
            </Card.Header>
            <Card.Body>
              {list.map((item) => (
                <div
                  key={item._id}
                  style={{ display: 'inline-block', marginLeft: '10px' }}
                >
                  <img src={item.img} alt="" style={{ width: '70px' }} />
                  <br />
                  <p style={{ display: 'inline-block', marginRight: '5px' }}>
                    {item.jin}币
                  </p>
                  <span
                    style={{
                      display: 'inline-block',
                      width: '20px',
                      height: '20px',
                      background: 'rgb(246, 94, 111)',
                      textAlign: 'center',
                      borderRadius: '50%',
                      color: '#fff',
                    }}
                    onClick={() => additem(item)}
                  >
                    +
                  </span>
                </div>
              ))}
            </Card.Body>
          </Card>
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{ backgroundColor: '#e3e3e3', padding: '18px 10px' }}
          title="厨卫用品"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                厨房用品
              </p>
            </Card.Header>
            <Card.Body>
              {list.map((item) => (
                <div
                  key={item._id}
                  style={{ display: 'inline-block', marginLeft: '3px' }}
                >
                  {item.flags == '1' ? (
                    <div>
                      <img src={item.img} alt="" style={{ width: '70px' }} />
                      <br />
                      <p
                        style={{ display: 'inline-block', marginRight: '5px' }}
                      >
                        {item.jin}币
                      </p>
                      <span
                        style={{
                          display: 'inline-block',
                          width: '20px',
                          height: '20px',
                          background: 'rgb(246, 94, 111)',
                          textAlign: 'center',
                          borderRadius: '50%',
                          color: '#fff',
                        }}
                        onClick={() => additem(item)}
                      >
                        +
                      </span>
                    </div>
                  ) : (
                    ''
                  )}
                </div>
              ))}
            </Card.Body>
          </Card>
          <Card>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                卫浴用品
              </p>
            </Card.Header>
            <Card.Body>
              {list.map((item) => (
                <div
                  key={item._id}
                  style={{ display: 'inline-block', marginLeft: '10px' }}
                >
                  <img src={item.img} alt="" style={{ width: '70px' }} />
                  <br />
                  <p style={{ display: 'inline-block', marginRight: '5px' }}>
                    {item.jin}币
                  </p>
                  <span
                    style={{
                      display: 'inline-block',
                      width: '20px',
                      height: '20px',
                      background: 'rgb(246, 94, 111)',
                      textAlign: 'center',
                      borderRadius: '50%',
                      color: '#fff',
                    }}
                    onClick={() => additem(item)}
                  >
                    +
                  </span>
                </div>
              ))}
            </Card.Body>
          </Card>
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{ backgroundColor: '#e3e3e3', padding: '18px 10px' }}
          title="垃圾处理"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                垃圾桶
              </p>
            </Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
          <Card>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                垃圾袋
              </p>
            </Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
        </Sidebar.Item>
        <Sidebar.Item
          contentStyle={{ backgroundColor: '#e3e3e3', padding: '18px 10px' }}
          title="家用电器"
        >
          <Card style={{ marginBottom: '15px' }}>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                小电器
              </p>
            </Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
          <Card>
            <Card.Header>
              <p style={{ borderLeft: '3px solid red', paddingLeft: '10px' }}>
                大型电器
              </p>
            </Card.Header>
            <Card.Body>卡片内容区域</Card.Body>
          </Card>
        </Sidebar.Item>
      </Sidebar>
    </div>
  );
}
